<script lang="ts" setup>

import {copyText} from "../../utils/Utils.ts";
import {Picture} from "@element-plus/icons-vue";

const props = defineProps({uri: {type: String, required: true}});

const base = (u: string) => u
    .replace('https://img.nga.178.com/attachments', './')
    .replace('http://img.nga.178.com/attachments', './')

const trans = (u: string): string => base(u).replace('./', '/static/attach/attachments/')
const oriTrans = (u: string): string => base(u).replace('./', '/static/attach/attachments/')
    .replace(/\.thumb.+/g, '').replace('.medium.jpg', '')
const code = (u: string) => `[img]${u}[/img]`
const url = (u: string): string => base(u).replace('./', 'https://img.nga.178.com/attachments/')
const ori = (u: string): string => url(u).replace(/\.thumb.+/g, '').replace('.medium.jpg', '')


const handleCommand = (command: string) => {
  switch (command) {
    case 'code':
      copyText(code(props.uri), "论坛代码")
      break;
    case 'url':
      copyText(url(props.uri), "图片地址")
      break;
    case 'ori':
      copyText(ori(props.uri), "原图地址")
      break;
  }
}
</script>

<template>
  <el-dropdown :show-timeout="1000" @command="handleCommand">
    <el-image
        :preview-src-list="[oriTrans(props.uri)]"
        :src="trans(props.uri)"
        class="nga-image"
        hide-on-click-modal
        preview-teleported
        loading="lazy"
    >
      <template #error>
        <span class="image-error">
          <el-icon size="30">
            <Picture/>
          </el-icon>
          <br/>
          <span>图片加载失败</span>
        </span>
      </template>
    </el-image>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="code">论坛代码</el-dropdown-item>
        <el-dropdown-item command="url">图片地址</el-dropdown-item>
        <el-dropdown-item v-if="url(props.uri) != ori(props.uri)" command="ori">原图地址</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>

</style>